<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/main.css" rel="stylesheet" />
		<style type="text/css">
			.search-box{
				width:100%;
				display: flex;
				flex-direction: row;
				margin-top: 20px;
			}
			.search-box #search-btn:active{
				background-color: #4c4c4c;
			}
			.search-box #search-btn{
				height: 50px; 
				width:100px;
				background-color: #000;
				color: #fff;
				border-top-right-radius: 50px;
				border-bottom-right-radius: 50px;
				position: relative;
				text-align: center;
				line-height: 30px;
				font-size: 50px;
				font-weight: bold;
			}
			.mui-bar-nav{
				box-shadow: none;
			}
			.search-box input{
				width: 100%;
				height: 50px;
				border-top-left-radius: 50px;
				border-bottom-left-radius: 50px;
				outline: none;
				padding-left: 25px;
				padding-right:25px ;
				z-index: 999;
				border: 0;
				margin: 0;
			}
			.mui-content{
				height: 100vh;
				width: 100%;
				background-image: url(../img/bg_black1.jpg);
				background-size: 100% 100vh;
				background-repeat: no-repeat;
				padding: 15px;
			}
			.mui-scroll-wrapper{
				top: 170px;
				height: 70vh;
			}
			.mui-table-view-cell a:active{
				background-color: #eee;
			}
			.mui-table-view{
				background-color: transparent;
				width: 94%;
				transform: translateX(3%);
				border-radius: 8px;
			}
			.mui-table-view-cell{
				background-color:  rgba(0,0,0,.2);
				border-radius:inherit;
			}
			.mui-table-view .mui-media-object{
				width: 70px;
				height: 70px;
				max-width: none;
				border-radius: 6px;
			}
			.mui-table-view::before,.mui-table-view::after{
				height: 0;
			}
			.mui-table-view-cell:after{
				height: 0;
			}
			.mui-table-view-cell+.mui-table-view-cell{
				margin-top: 10px;
			}
			.mui-table-view a{
				border-radius: inherit;
			}
			.mui-media-body:not(p){
				margin-top: 7px;
				font-size: 20px;
				color: #cccccc;
				text-shadow: 0 0 6px #f13d01;
				
			}
			.mui-media-body p{
				font-size: 16px;
				margin-top: 12px;
			}
			#text{
				text-align: center;
				color: #fff;
				font-size: 18px;
				text-shadow: 0 0 4px #007AFF;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-margin-25"></div>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">搜索</h1>
		</header>
		<div class="mui-content">
			<div class="search-box">
				<input type="text" placeholder="请输入易信号码" />
				<div id="search-btn">
					<i class="mui-icon mui-icon-search"></i>
				</div>
			</div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll" id="container">
					
				</div>
			</div>
			
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/main.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init({
				  gestureConfig:{
				   tap: true, //默认为true
				   doubletap: true, //默认为false
				   longtap: true, //默认为false
				   swipe: true, //默认为true
				   drag: true, //默认为true
				  }
			})
			mui.plusReady(function () {
				mui('.mui-scroll-wrapper').scroll();
			    var currentWebview = plus.webview.currentWebview();
				plus.nativeUI.closeWaiting();
				currentWebview.show("slide-in-right",300);
				
				mui(document).on("tap",".mui-table-view-cell",function(){
					plus.nativeUI.showWaiting("请稍后...")
					plus.webview.create("sacn-code-friends-info.html","sacn-code-friends-info.html",{},{_ext_user_id:$(this).attr("data-id"),bindType:1})
				})
				
				mui("#search-btn")[0].addEventListener("tap",function(){
					if(!mui(".search-box input")[0].value||mui(".search-box input")[0].value === ""){
						return ;
					}
					_SERVER.user.queryUserByUserName(mui(".search-box input")[0].value).then(res=>{
						if(res.code === "200"){
							var html;
							html = getHtml(res.data);
							$("#container").html(html);
						}else{
							mui.toast(res.msg)
						}
					})
				})
			})
			function getHtml(obj){
				var html = "";
				if(!obj||obj.length ==0){
					html+='<div id="text">未查询到用户</div>';
				}else{
					html+='<ul class="mui-table-view" >';
						for (var i = 0; i < obj.length; i++) {
							
							html+='<li class="mui-table-view-cell mui-media" data-id="'+obj[i].id+'">';
								html+='<a href="javascript:;">';
									html+='<img class="mui-media-object mui-pull-left" src="'+(obj[i].photoDefault?obj[i].photoDefault:"../../img/def_photo.jpg")+'">';
									html+='<div class="mui-media-body">';
										html+=obj[i].name;
										html+='<p class="mui-ellipsis">易信号：'+obj[i].username+'</p>';
									html+='</div>';
								html+='</a>';
							html+='</li>';
						}
						
					html+='</ul>';
				}
				return html;
			}
		</script>
	</body>

</html>
